<template>
  <button
    class="switch-class tw-w-10 tw-rounded-full tw-flex tw-justify-around tw-bg-blue-600 tw-border-2 tw-border-neutral-500 hover:tw-border-neutral-300 dark:tw-bg-gray-600 dark:tw-border-gray-600 dark:hover:tw-border-gray-300"
    @click="switchBtn"
  >
    <i
      class="tw-h-5 tw-w-5 tw-rounded-full tw-opacity-100 tw-bg-white tw-border-black dark:tw-bg-black dark:tw-opacity-0 toggle-transition"
    ></i>
    <i
      class="tw-h-5 tw-w-5 tw-rounded-full tw-opacity-0 tw-bg-white dark:tw-opacity-100 dark:tw-bg-black toggle-transition"
    ></i>
  </button>
</template>

<script setup lang="ts">
const switchBtn = () => {
  const isDark = document.querySelector('.tw-dark')
  const switchButton = document.querySelector('button.switch-class')
  if (switchButton) {
    if (!isDark) {
      const leftIcon = switchButton.querySelector('.tw-opacity-100')
      const rigthtIcon = switchButton.querySelector('.tw-opacity-0')
      if (leftIcon) {
        leftIcon.classList.toggle('tw-opacity-0')
        leftIcon.classList.toggle('tw-opacity-100')
      }
      if (rigthtIcon) {
        rigthtIcon.classList.toggle('tw-opacity-0')
        rigthtIcon.classList.toggle('tw-opacity-100')
      }
    } else {
      try {
        const leftIcon = switchButton.querySelector('.dark\\:tw-opacity-0')
        const rigthtIcon = switchButton.querySelector('.dark\\:tw-opacity-100')

        if (leftIcon) {
          leftIcon.classList.toggle('dark:tw-opacity-0')
          leftIcon.classList.toggle('dark:tw-opacity-100')
        }
        if (rigthtIcon) {
          rigthtIcon.classList.toggle('dark:tw-opacity-100')
          rigthtIcon.classList.toggle('dark:tw-opacity-0')
        }
      } catch (error) {
        console.log(error)
      }
    }
  }
}
</script>
